<template>
  <div>
    <el-card class="box-card" v-for="task, index in getTasks" shadow="hover">
      <el-row>
        <el-col :span="18" class="box-card-title">
          <el-checkbox v-model="task.isFinish" :disabled="task.isFinish" @change="finish(index)">
            <span>{{ task.title }}</span>
          </el-checkbox>
        </el-col>

        <el-col :span="5">
          <time v-if="!task.isFinish" class="time">{{ task.time }}</time>
          <span v-if="task.isFinish" class="box-card-finish">已完成</span>
        </el-col>
        <el-col :span="1">
          <el-popover placement="bottom" width="150" v-model="delVisible[index]">
            <p>今天及以后将不再提醒，是否确定删除？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$set(delVisible, index, false)">取消</el-button>
              <el-button type="primary" size="mini" @click="deleteTask(index, task.title)">确定</el-button>
            </div>
            <i class="el-icon-delete" style="cursor: pointer;" slot="reference" v-bind:class="{'box-card-finish' : task.isFinish}"></i>
          </el-popover>
        </el-col>
      </el-row>
    </el-card>

    <!-- 新增任务 -->
    <el-card v-show="isAddTask" class="box-card" shadow="hover">
      <el-row>
        <el-col :span="24" class="box-card-title">
          <el-form ref="form" :model="form" :rules="rules" label-width="51px">
            <el-form-item label="事项" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="重复" required>
              <el-col :span="8"> 
                <el-select v-model="form.cycleType">
                  <el-option label="仅一次" value="once"></el-option>
                  <el-option label="每天" value="day"></el-option>
                  <el-option label="每周" value="week"></el-option>
                </el-select>
              </el-col>
              <el-col class="line" :span="7" v-show="form.cycleType === 'week'">
                <el-select v-model="form.weekDay">
                  <el-option label="周一" :value="1"></el-option>
                  <el-option label="周二" :value="2"></el-option>
                  <el-option label="周三" :value="3"></el-option>
                  <el-option label="周四" :value="4"></el-option>
                  <el-option label="周五" :value="5"></el-option>
                  <el-option label="周六" :value="6"></el-option>
                  <el-option label="周日" :value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :span="9">
                <el-form-item prop="time">
                  <el-time-select placeholder="时间" v-model="form.time" style="width: 100%"
                    :picker-options="{ start: '08:30', step: isDev ? '00:01' : '00:15', end: '18:30' }"></el-time-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button type="primary" @click="onSave">保存</el-button>
              <el-button @click="isAddTask = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <div v-show="!isAddTask" @click="showAddtask" style="margin-top: 15px;cursor: pointer;">
      <i class="el-icon-circle-plus"></i>
      添加提醒事项
    </div>
  </div>
</template>
<script type="text/javascript">
  import { mapGetters, mapMutations, mapActions } from 'vuex'

  export default {
    name: 'notice',
    data () {
      return {
        isAddTask : false,
        delVisible : [],
        form: {
          cycleType: 'once',
          weekDay: 1,
          time: new Date().format('HH') + ':00'
        },
        rules: {
          title: [
            { required: true, message: '事项不能为空', trigger: 'change' }
          ],
          time: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
        }
      }
    },
    computed:{
      ...mapGetters(['getTaskTemplates', 'getTasks', 'isDev']),
    },
    methods: {
      ...mapActions(['firstRun', 'createTodayTask', 'flushTimer']),
      ...mapMutations(['addTaskTemplate', 'finishTask', 'saveAllTask', 'addTask', 'removeTaskTemplate', 'removeTask']),
      finish (index) {
        this.finishTask({ index })
        this.saveAllTask()
        this.flushTimer()
      },
      deleteTask (index, title) {
        this.removeTaskTemplate({ title })
        this.removeTask({ index })
        this.saveAllTask()
        this.$set(this.delVisible, index, false)
      },
      onSave (){
        this.$refs.form.validate( valid => {
          if (valid) {
            switch (this.form.cycleType) {
              case 'once': 
                this.addTask({ task: {isFinish: false, ... this.form} })
                break
              case 'day':
                this.addTask({ task: {isFinish: false, ... this.form} })
                this.addTaskTemplate({ template: this.form })
                break
              case 'week':
                this.addTaskTemplate({ template: this.form })
                let now = new Date()
                if (now.getDay() === this.form.weekDay) {
                  this.addTask({ task: {isFinish: false, ... this.form} })
                }
                break
            }
            this.saveAllTask()
            this.flushTimer()
            this.isAddTask = false
          }
        });
      },
      showAddtask () {
        this.isAddTask = true

        if (this.isDev) {
          let d = new Date();
          d.setMinutes(d.getMinutes() + 1)
          this.form.time = d.format('HH:mm')
        }
      }
    },
  }
</script>